<template>
	<div class="table-demo">
		<BasicContainer>
			<vpro-table
				:select="false"
				v-loading="loading"
				:columns="tableColumns"
				:pagination="page"
				:data="tableData"
			>
				<template v-slot:subject="slotProps">
					<a
            target="_blank"
            style="color: blue"
						:href="'https://www.baidu.com/s?ie=UTF-8&wd=' + slotProps.row.subject"
						>{{ slotProps.row.subject }}</a
					>
				</template>
			</vpro-table>
		</BasicContainer>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import BasicContainer from '../components/vpro-materials/basic-container'
import VproTable from '../components/vpro-materials/vpro-table'
let loading = ref(false)
let tableData = reactive([
	{
		id: 1,
		name: 'Ryzen',
		class: '高三(10班)',
		subject: '化学',
		grade: '100',
	},
])
let tableColumns = [
	{
		type: 'string',
		dataIndex: 'id',
		title: 'ID',
	},
	{
		type: 'string',
		dataIndex: 'name',
		title: '姓名',
	},
	{
		type: 'string',
		dataIndex: 'class',
		title: '班级',
		width: '120',
	},
	{
		type: 'custom',
		dataIndex: 'subject',
		title: '学科',
	},
	{
		type: 'string',
		dataIndex: 'grade',
		title: '成绩',
		customRender: row => {
			return row.grade + '分'
		},
	},
	{
		type: 'action',
		title: '操作',
		width: '120',
		fixed: 'right',
		actions: [
			{
				title: '查看详情',
				click: row => {
					console.log(row)
				},
			},
		],
	},
]
let page = {
	count: 0,
	length: 10,
	currentPage: 1,
	tableChange: () => {},
}
</script>

<style></style>
